﻿@model BestsellersReportModel
@using Telerik.Web.Mvc.UI
@{
    ViewBag.Title = T("Admin.SalesReport.Bestsellers").Text;
}
@using (Html.BeginForm())
{
    <div class="section-header">
        <div class="title">
            <i class="fa fa-thumbs-up"></i>
            @T("Admin.SalesReport.Bestsellers")
        </div>
        <div class="options">
        </div>
    </div>

	<div class="row mt-3 grid-filter">
		<div class="col-sm-6 col-lg-4 col-xl-3 form-group">
			@Html.SmartLabelFor(model => model.StartDate)
			@Html.EditorFor(model => model.StartDate)
		</div>
		<div class="col-sm-6 col-lg-4 col-xl-3 form-group">
			@Html.SmartLabelFor(model => model.EndDate)
			@Html.EditorFor(model => model.EndDate)
		</div>
		<div class="col-sm-6 col-lg-4 col-xl-3 form-group">
			@Html.SmartLabelFor(model => model.OrderStatusId)
			@Html.DropDownList("OrderStatusId", Model.AvailableOrderStatuses, T("Admin.Common.All"))
		</div>
		<div class="col-sm-6 col-lg-4 col-xl-3 form-group">
			@Html.SmartLabelFor(model => model.PaymentStatusId)
			@Html.DropDownList("PaymentStatusId", Model.AvailablePaymentStatuses, T("Admin.Common.All"))
		</div>

		<div class="col-sm-6 col-lg-4 col-xl-3 form-group">
			<button type="submit" id="btnSearch" value="btnSearch" class="btn btn-secondary btn-block">
				<span>@T("Admin.SalesReport.Bestsellers.RunReport")</span>
			</button>
		</div>
	</div>

    <div>
		@(Html.Telerik().Grid<BestsellersReportLineModel>()
			.Name("salesreport-grid")
			.ClientEvents(events => events.OnDataBinding("onDataBinding"))
			.Columns(columns =>
			{
				columns.Bound(x => x.ProductName)
					.ClientTemplate(@Html.LabeledProductName("ProductId", "ProductName"));
				columns.Bound(x => x.TotalQuantity)
					.Centered()
					.Width(200);
				columns.Bound(x => x.TotalAmount)
					.RightAlign()
					.Width(200);
			})
			.DataBinding(dataBinding => dataBinding.Ajax().Select("BestsellersReportList", "Order"))
			.EnableCustomBinding(true))
	</div>
    
    <script type="text/javascript">

        $(document).ready(function () {

            $('#btnSearch').click(function () {
                var grid = $('#salesreport-grid').data('tGrid');
                grid.currentPage = 1; //new search. Set page size to 1
                grid.ajaxRequest();
                return false;
            });

        });

        function onDataBinding(e) {
            var searchModel = {
                StartDate: $('#@Html.FieldIdFor(model => model.StartDate)').val(),
                EndDate: $('#@Html.FieldIdFor(model => model.EndDate)').val(),
                OrderStatusId: $('#@Html.FieldIdFor(model => model.OrderStatusId)').val(),
                PaymentStatusId: $('#@Html.FieldIdFor(model => model.PaymentStatusId)').val()
            };
            e.data = searchModel;
        }

    </script>
}